<template>
    <div class="demo" style="overflow: auto;">
        <div style="height: 1200px">
            <!--
                swiper中单个slide的宽度与slidesPerView有关，它用来设置slider容器能够同时显示的slides数量(carousel模式)。
                可以设置为数字（可为小数，小数不可loop），比如设置为3，那么单屏就会显示3个slide；或者 'auto'则自动根据slides的宽度来设定数量。
                如果需要自定义slide的宽度，那么一定需要设置slidesPerView为auto。
            -->
            <swiper class="swiper" :options="swiperOption" style="width: 500px;">
                <swiper-slide style="width: 200px; height: 200px; background: red">
                    <div></div>
                </swiper-slide>
                <swiper-slide style="width: 300px; height: 200px; background: green">
                    <div></div>
                </swiper-slide>
                <swiper-slide style="width: 200px; height: 200px; background: blue">
                    <div></div>
                </swiper-slide>
                <swiper-slide style="width: 100px; height: 200px; background: gray">
                    <div></div>
                </swiper-slide>
                <swiper-slide style="width: 400px; height: 200px; background: yellow">
                    <div></div>
                </swiper-slide>
                <swiper-slide style="width: 200px; height: 200px; background: pink">
                    <div></div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
    import { Swiper, SwiperSlide } from "vue-awesome-swiper";
    import 'swiper/css/swiper.css'
    export default {
        components: {
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                swiperOption: {
                    slidesPerView: 'auto',
                    mousewheel: true,
                    freeMode : true,
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.demo /deep/ .swiper-slide {
    width: 80%;
}
.demo /deep/ .swiper-slide:nth-child(1) {
    width: 200px;
}
</style>